<template>
  <div ref="mapChart" style="width: 100%; height: 60vh"></div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'

import * as echarts from 'echarts'

import jiangsu from '@/assets/json/jaingsu.json'

const mapSize = '160%'
const zoom = '0.65'
const aspectScale = 0.9
const mapChart = ref()
let chart: any = null

// 控制地区显示不同颜色的分数值
const data = [
  { name: '同安区', value: 500 },
  { name: '集美区', value: 260 },
  { name: '海沧区', value: 490 },
  { name: '湖里区', value: 780 },
  { name: '思明区', value: 800 },
  { name: '翔安区' }
]

// 提示
const pieces = [
  {
    min: 630,
    label: '风险',
    color: '#ecc051',
    richKey: 'c1'
  },
  {
    max: 559,
    label: '问题',
    color: '#2a97e3',
    richKey: 'c2'
  }
]

let option = {
  geo: [
    {
      map: 'jiangsu',
      aspectScale,
      zoom,
      layoutCenter: ['50%', '50%'],
      layoutSize: mapSize,
      label: {
        emphasis: {
          show: false
        }
      }
    },
    // 重影
    {
      type: 'map',
      map: 'jiangsu',
      zlevel: -1,
      aspectScale,
      zoom,
      layoutCenter: ['50%', '51%'],
      layoutSize: mapSize,
      itemStyle: {
        normal: {
          areaColor: '#409eff',
          borderColor: '#fff',
          borderWidth: 0.1,
          // 重影模糊颜色
          shadowColor: '#001937',
          // 偏移量
          shadowOffsetY: 5,
          // 半径
          shadowBlur: 60
        }
      }
    }
  ],
  tooltip: {
    show: false
  },
  series: [
    {
      type: 'map',
      map: 'jiangsu', // 自定义扩展图表类型
      aspectScale,
      zoom, // 缩放
      showLegendSymbol: true,
      label: {
        normal: {
          show: true,
          textStyle: {
            // 地图 字体颜色
            color: '#fff',
            fontSize: '16px'
          }
        }
      },
      // 只能 与 series 同级的 tooltip 同时存在
      tooltip: {
        show: true,
        trigger: 'item',
        backgroundColor: 'transparent',
        triggerOn: 'mousemove',
        borderColor: 'transparent',
        textStyle: {
          color: 'transparent'
        },
        padding: 0,
        confine: true,
        formatter: function () {}
      },
      itemStyle: {
        normal: {
          // 地图默认背景颜色
          areaColor: '#4b7902',
          borderColor: '#fff',
          borderWidth: 0.2
        },
        // 鼠标移动地图时的背景颜色
        emphasis: {
          areaColor: '#2cb0e8',
          label: {
            show: true,
            textStyle: {
              color: '#fff' //鼠标经过字体颜色
            }
          }
        }
      },
      // 偏移量
      layoutCenter: ['50%', '50%'],
      // 地图 大小
      layoutSize: mapSize,
      // 地图不同颜色 显示 的 数据
      data: [],
      selectedMode: false // 去除地图点击后的黄色背景颜色
    }
  ]
  // 设置地图不同颜色
  // visualMap: {
  //   //视觉映射组件
  //   type: 'piecewise', //分段型。
  //   splitNumber: 2,
  //   inverse: true,
  //   pieces,
  //   seriesIndex: 0,
  //   left: 'right',
  //   bottom: '0%',
  //   textStyle: {
  //     color: '#333'
  //   }
  // }
}

onMounted(() => {
  initMapChart()
})

const initMapChart = () => {
  if (!mapChart.value) return
  echarts.registerMap('jiangsu', jiangsu as any)
  chart = echarts.init(mapChart.value)
  if (option && typeof option === 'object') {
    chart?.setOption(option)
  }
  window.addEventListener('resize', resize)
}

const resize = () => {
  chart?.resize()
}
</script>

<style scoped></style>
